<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="resources/css/public.css" media="all" />
</head>
<body class="childrenBody">

<div class="layui-form-item input-item">
    <label for="telephone">手机号</label>
    <input type="text" placeholder="请输入手机号" autocomplete="off"  id="telephone" name="telephone" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item">
    <label for="password">新密码</label>
    <input type="password" placeholder="请输入密码" autocomplete="off"  id="password" name="password" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item" id="imgCode">
    <label for="code" >验证码</label>
    <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code" class="layui-input" lay-verify="required" style="width: 100px">
    <input type="button" id="btn" value="发送验证码" style="float:left" lay-verify="required"/>
</div>

<div class="layui-form-item">
    <button class="layui-btn layui-block" lay-filter="submit" id="submit" lay-submit>提交</button>
</div>

<!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['form','layer','laydate','table','laytpl'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;

        //我们在这里定义一个验证码变量
        var code;
        var clock;
        //发送验证码
        $("#btn").click(function () {
            btnCheck();//调用倒计时方法
            var telephone=$("#telephone").val();
            $.ajax({
                url:"sendNote.do",
                type:"POST",
                data:{telephone:telephone},
                datatype:"json",
                success: function (res) {
                    //先在这里后端传回来的验证码赋值
                    console.log(res)
                    code=res;
                }
            })
        });

        /**
         * 验证码倒计时
         */
        function btnCheck(){
            var time = 60;
            $("#btn").attr("disabled", true);
            var timer = setInterval(function() {
                if (time>0) {
                    $("#btn").val("重新发送"+time);
                    time=time-1;
                } else {
                    $("#btn").attr("disabled", false);
                    $("#btn").val("发送验证码");
                    clearInterval(timer);
                    time=60;
                }
            }, 1000);
        }
        /**
         * 找回密码提交按钮
         */
        $("#submit").click(function () {
            var inputCode=$("#code").val();
            if(inputCode!=''){
                var telephone=$("#telephone").val();
                var password=$("#password").val();
                //当按了提交按钮，我们就判断后端返回回来的验证码与我们输入的是否一致
                if (inputCode==code){
                    $.ajax({
                        url:"updatePasswordByCode.do",
                        type:"POST",
                        data:{telephone:telephone,password:password},
                        datatype:"json",
                        success: function (res) {
                            var index1=parent.layer.getFrameIndex(window.name)
                            parent.layer.close(index1);
                            layer.msg("修改成功，请登录！")
                        }
                    })
                }else {
                    layer.msg("验证码错误")
                }
            }else{
                layer.msg("请输入验证码！")
            }

        });
    })

</script>
</body>
</html>